<template>
  <div class="order-detail" v-if="order.order">
    <card _Title="订单详情" :_Size="16"></card>
    <Card
      class="mb_10"
      v-if="
        order.allowOperationVO.pay ||
        order.allowOperationVO.rog ||
        order.allowOperationVO.cancel
      "
    >
      <!--Button
        type="success"
        @click="goPay(order.order.sn)"
        size="small"
        v-if="order.allowOperationVO.pay"
        >去支付</Button
      -->
      <Button
        type="info"
        @click="received(order.order.sn)"
        size="small"
        v-if="order.allowOperationVO.rog"
        >确认收货</Button
      >
      <Button
        type="error"
        @click="handleCancelOrder(order.order.sn)"
        v-if="order.allowOperationVO.cancel"
        size="small"
        >取消订单</Button
      >
    </Card>
    <p class="verificationCode" v-if="order.order.verificationCode">
      核验码：<span>{{ order.order.verificationCode }}</span>
    </p>
    <div class="order-card">
      <p class="global_color fontsize_18">{{ order.orderStatusValue }}</p>
      <!--p>订单号：{{ order.order.sn }}</p>
      <div style="color: #999" class="operation-time">
        操作时间：{{ order.order.updateTime || order.order.createTime }}
      </div-->
      <Steps
        class="progress"
        :current="progressList.length"
        direction="vertical"
      >
        <Step
          :title="progress.message"
          :content="progress.createTime"
          v-for="(progress, index) in progressList"
          :key="index"
        ></Step>
      </Steps>
    </div>
    <div class="order-card" v-if="order.order.deliveryMethod == 'LOGISTICS' && order.order.orderPromotionType !== 'TOUR'">
      <h3>收货人信息</h3>
      <p>收货人：{{ order.order.consigneeName }}</p>
      <p>手机号码：{{ order.order.consigneeMobile | secrecyMobile }}</p>
      <p>
        收货地址：{{ order.order.consigneeAddressPath | unitAddress }}
        {{ order.order.consigneeDetail }}
      </p>
    </div>
    <div class="order-card" v-if="order.order.deliveryMethod == 'SELF_PICK_UP' && order.order.orderPromotionType !== 'TOUR'">
      <h3>自提点信息</h3>
      <p>自提点名称：{{ order.order.storeAddressPath }}</p>
      <p>联系方式：{{ order.order.storeAddressMobile }}</p>
    </div>
    <div class="order-card" v-if="order.order.orderPromotionType !== 'TOUR'">
      <h3>付款信息</h3>
      <p>支付方式：{{ order.paymentMethodValue }}</p>
      <p>付款状态：{{ order.payStatusValue }}</p>
    </div>
    <div class="order-card" v-if="!order.order.verificationCode && order.order.orderPromotionType !== 'TOUR'">
      <h3>配送信息</h3>
      <p>配送方式：{{ order.deliveryMethodValue }}</p>
      <p v-if="order.order.deliveryMethod === 'LOGISTICS'">配送状态：{{ order.deliverStatusValue }}</p>
      <p v-if="logistics">
        物流信息：{{ logistics.shipper || "暂无物流信息" }}
      </p>
      <p v-if="logistics">
        物流单号：{{ logistics.logisticCode || "暂无物流单号" }}
      </p>
      <div class="div-express-log" v-if="logistics">
        <div class="express-log">
          <p>订单日志：</p>
          <div v-for="(item, index) in logistics.traces" :key="index">
            <span class="time">{{ item.AcceptTime }}</span>
            <span class="detail">{{ item.AcceptStation }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="order-card" v-if="order.order.payStatus === 'PAID'">
      <h3>发票信息</h3>
      <template v-if="order.order.needReceipt && order.receipt">
        <p>发票抬头：{{ order.receipt.receiptTitle }}</p>
        <p>发票内容：{{ order.receipt.receiptContent }}</p>
        <p v-if="order.receipt.taxpayerId">
          纳税人识别号：{{ order.receipt.taxpayerId }}
        </p>
      </template>
      <div v-else style="color: #999; margin-left: 5px">未开发票</div>
    </div>

    <!-- 1、订单商品  ------------------------------------------------->
    <div class="goods">
      <!--div class="shop-name">
        <span @click="shopPage(order.order.storeId)">{{ order.order.storeName }}</span>
      </div-->
      <table>
        <thead>
          <tr>
            <th width="40%">名称</th>
            <th width="12%">单价</th>
            <th width="12%">数量</th>
            <th width="12%">小计</th>
            <th width="10%">操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(goods, goodsIndex) in order.orderItems" :key="goodsIndex">
            <td>
              <img @click="goodsDetail(goods.skuId, goods.goodsId)" :src="pictureUrl(goods.image)" alt="" />
              <div>
                <p @click="goodsDetail(goods.skuId, goods.goodsId)" class="hover-color" >
                  {{ goods.goodsName }}
                </p>
                <p class="Ellipsis" >
                  <span class="item-price-title">出团日期</span><i>：</i>
                  <span class="item-coupon">{{ goods.tourDate }}</span>
                </p>
              </div>
            </td>
            <td>
              <p><span>成人</span><span>{{ goods.goodsPrice | unitPrice("￥") }}</span></p>
              <p v-if="goods.childNum > 0"><span>儿童</span><span>{{ goods.childPrice | unitPrice("￥") }}</span></p>
            </td>
            <td>
              <p><span>{{ goods.num }}</span></p>
              <p v-if="goods.childNum > 0"><span>{{ goods.childNum }}</span></p>
            </td>
            <td>
              <p><span>{{ (goods.goodsPrice * goods.num) | unitPrice("￥") }}</span></p>
              <p v-if="goods.childNum > 0"><span>{{ (goods.childPrice * goods.childNum) | unitPrice("￥") }}</span></p>
            </td>
            <td>
              <Button
                v-if="
                  goods.afterSaleStatus.includes('NOT_APPLIED') ||
                  goods.afterSaleStatus.includes('PART_AFTER_SALE')
                "
                @click="applyAfterSale(goods.sn)"
                type="info"
                size="small"
                class="mb_5"
                >申请售后</Button
              >
              <Button
                v-if="goods.commentStatus == 'UNFINISHED'"
                @click="comment(order.order.sn, goodsIndex)"
                size="small"
                type="success"
                class="fontsize_12 mb_5"
                >评价</Button
              >
              <Button
                v-if="goods.complainStatus == 'NO_APPLY'"
                @click="complain(order.order.sn, goodsIndex)"
                type="warning"
                class="fontsize_12"
                size="small"
                >投诉</Button
              >
            </td>
          </tr>
        </tbody>
      </table>
      
      <!-- 2、订单价格 ------------------------------------------------->
      <div class="order-price">
        <!--div>
          <span>出团人数：</span><span>{{ order.order.goodsNum }}件</span>
        </div-->
        <div>
          <span>团款金额：</span><span>{{ priceDetailDTO.goodsPrice | unitPrice("￥") }}</span><br />
        </div>
        <div>
          <span>增项金额：</span><span>{{ priceDetailDTO.addPrice | unitPrice("￥") }}</span>
        </div>
        <!--div >
          <span>运费：</span
          ><span>+{{ order.order.freightPrice | unitPrice("￥") }}</span
          ><br />
        </div-->
        <div v-if="order.order.priceDetailDTO.couponPrice">
          <span>优惠券：</span><span>-{{priceDetailDTO.couponPrice || 0 | unitPrice("￥")}}</span>
        </div>
        <div v-if="order.order.discountPrice">
          <span>活动优惠：</span><span>-{{ priceDetailDTO.discountPrice | unitPrice("￥") }}</span>
        </div>
        <div>
          <span>减项金额：</span>
          <span v-if="priceDetailDTO.subPrice > 0">-{{ priceDetailDTO.subPrice | unitPrice("￥") }}</span>
          <span v-else>{{ priceDetailDTO.subPrice | unitPrice("￥") }}</span>
        </div>
        <div>
          <span>应付金额：</span>
          <span class="actrual-price">{{ priceDetailDTO.flowPrice | unitPrice("￥")}}</span>
        </div>
      </div>

      <!-- 3、游客信息  ------------------------------------------------->
      <div class="invoice" >
        <div class="card-head mt_20" style="font-size: 16px; padding: 10px 5px">
          <span class="inv-tips"><Icon type="ios-alert-outline" /></span><span class="relative">游客信息</span>
        </div>
        <div class="inovice-content">
          <vxe-table
            border
            size="small" 
            resizable
            keep-source
            show-overflow
            ref="xTable"
            :data="visitors"
          >
            <vxe-column type="seq" width="50" align="center"></vxe-column>
            <vxe-column field="name" title="姓名" width="145">
              <template #edit="{ row }">
                <vxe-input v-model="row.name" class="input-name" type="text"></vxe-input>
              </template>
            </vxe-column>
            <vxe-column field="type" title="证件类型" width="140" >
              <template #default="{ row }">
                <span>{{ formatCertType(row.type) }}</span>
              </template>
              <template #edit="{ row }">
                <vxe-select v-model="row.type" transfer>
                  <vxe-option v-for="item in certList" :key="item.value" :value="item.value" :label="item.label"></vxe-option>
                </vxe-select>
              </template>
            </vxe-column>
            <vxe-column field="number" title="证件号" width="205" align="center" :edit-render="{autofocus: '.vxe-input--inner', placeholder: '请点击输入证件号'}">
              <template #edit="{ row }">
                <Input v-model="row.number" type="text"></Input>
              </template>
            </vxe-column>
            <vxe-column field="sex" title="性别" width="110" align="center">
              <template #default="{ row }">
                <span>{{ formatSex(row.sex) }}</span>
              </template>
              <template #edit="{ row }">
                <vxe-select v-model="row.sex" transfer >
                  <vxe-option v-for="item in sexList" :key="item.value" :value="item.value" :label="item.label"></vxe-option>
                </vxe-select>
              </template>
            </vxe-column>
            <vxe-column field="age" title="年龄" width="105" align="center" >
              <template #edit="{ row }">
                <vxe-input v-model="row.age" type="text" ></vxe-input>
              </template>
            </vxe-column>
            <vxe-column field="tel" title="联系电话" width="135" >
              <template #edit="{ row }">
                <vxe-input v-model="row.tel" type="text" transfer></vxe-input>
              </template>
            </vxe-column>
          </vxe-table>
        </div>
      </div>
    </div>

    <Modal
      v-model="cancelAvail"
      title="请选择取消订单原因"
      @on-ok="sureCancel"
      @on-cancel="cancelAvail = false"
    >
      <RadioGroup
        v-model="cancelParams.reason"
        vertical
        type="button"
        button-style="solid"
      >
        <Radio :label="item.reason" v-for="item in cancelReason" :key="item.id">
          {{ item.reason }}
        </Radio>
      </RadioGroup>
    </Modal>
  </div>
</template>
<script>
import {
  orderDetail,
  getTraces,
  sureReceived,
  cancelOrder,
} from "@/api/order.js";
import { afterSaleReason } from "@/api/member";
import { staticUrl } from '@/plugins/request';
export default {
  name: "order-detail",
  data() {
    return {
      order: {},          // 订单详情数据
      priceDetailDTO: {}, // 商品价格
      progressList: [],   // 订单流程
      logistics: "",      // 物流数据
      // 取消售后参数
      cancelParams: {
        orderSn: "",
        reason: "",
      },
      cancelAvail: false, // 取消订单modal控制
      cancelReason: [],   // 取消订单原因

      visitors: [],
      //------游客信息-------------
      certList: [
        { label: '身份证', value: '1' },
        { label: '护照', value: '2' },
        { label: '军官证', value: '3' },
        { label: '港澳通行证', value: '4' },
        { label: '台湾通行证', value: '5' },
        { label: '台胞证', value: '6' },
        { label: '回乡证', value: '7' }
      ],
      sexList: [
        { label: '女', value: '0' },
        { label: '男', value: '1' }
      ],
    };
  },
  methods: {
    goodsDetail(skuId, goodsId) {
      // 跳转商品详情
      let path = "/goodsDetail", query = { skuId, goodsId };
      if (this.order.order.orderPromotionType === 'TOUR') {
        path  = "/goodsCruise";
        query = { goodsId };
      }
      let routeUrl = this.$router.resolve({
        path: path,
        query: query,
      });
      window.open(routeUrl.href, "_blank");
    },
    // 跳转店铺首页
    shopPage(id) {
      let routeUrl = this.$router.resolve({
        path: "/Merchant",
        query: { id: id },
      });
      window.open(routeUrl.href, "_blank");
    },
    getDetail() {
      // 获取订单详情
      orderDetail(this.$route.query.sn).then((res) => {
        if (res.success) {
          this.order = res.result;
          this.priceDetailDTO = res.result.order.priceDetailDTO;
          console.info(this.priceDetailDTO)
          this.progressList = res.result.orderLogs;
          if (this.order.order.deliveryMethod === 'LOGISTICS') {
            this.traces();
          }
          //游客信息
          this.visitors = res.result.orderVisitors || [];
        }
      });
    },
    traces() {
      // 物流信息
      getTraces(this.$route.query.sn).then((res) => {
        if (res.success) {
          this.logistics = res.result;
        }
      });
    },
    received(sn) {
      // 确认收货
      sureReceived(sn).then((res) => {
        if (res.success) {
          this.$Message.success("确认收货成功");
          this.getDetail();
        }
      });
    },
    goPay(sn) {
      // 去支付
      this.$router.push({
        path: "/payment",
        query: { orderType: "ORDER", sn },
      });
    },
    applyAfterSale(sn) {
      // 申请售后
      this.$router.push({ name: "ApplyAfterSale", query: { sn: sn } });
    },
    comment(sn, goodsIndex) {
      // 评价
      this.$router.push({
        path: "/home/addEval",
        query: { sn, index: goodsIndex },
      });
    },
    complain(sn, goodsIndex) {
      // 投诉
      this.$router.push({ name: "Complain", query: { sn, index: goodsIndex } });
    },
    handleCancelOrder(sn) {
      // 取消订单
      this.cancelParams.orderSn = sn;
      afterSaleReason("CANCEL").then((res) => {
        if (res.success) {
          this.cancelReason = res.result;
          this.cancelAvail = true;
          this.cancelParams.reason = this.cancelReason[0].reason;
        }
      });
    },
    sureCancel() {
      // 确定取消
      cancelOrder(this.cancelParams).then((res) => {
        if (res.success) {
          this.$Message.success("取消订单成功");
          this.getDetail();
          this.cancelAvail = false;
        }
      });
    },
    pictureUrl(path) {
      if (!path) {
        return '';
      } else if (path.indexOf("photos/")>=0) {
        return staticUrl + "/" + path
      } else {
        return path
      }
    },

    //--------------------------------------------------------
    formatCertType (value) {
      var text = ''
      switch (value) {
        case '1':
          text = '身份证'
          break;
        case '2':
          text = '护照'
          break;
        case '3':
          text = '军官证'
          break;
        case '4':
          text = '港澳通行证'
          break;
        case '5':
          text = '台湾通行证'
          break;
        case '6':
          text = '台胞证'
          break;
        case '7':
          text = '回乡证'
          break;
      }
      return text;
    },

    formatSex (value) {
      if (value == '0') {
        return '女'
      } else if (value == '1') {
        return '男'
      } else {
        return ''
      }
    },
  },

  mounted() {
    this.getDetail();
  },
};
</script>
<style lang="scss" scoped>
.mb_10 {
  Button:nth-of-type(2) {
    margin-left: 10px;
  }
}

.mb_5 {
  margin-bottom: 5px;
}

:deep(.ivu-card-head) {
  padding: 16px 14px !important;
}

.order-card {
  padding: 10px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid #e8eaec;
  position: relative;
  .global_color {
    color: $theme_color;
  }
  p {
    color: #999;
    margin: 3px;
    margin-left: 5px;
  }
  h3 {
    font-weight: normal;
    font-size: 16px;
  }
  .operation-time {
    position: absolute;
    right: 20px;
    top: 20px;
  }
}
/** 店铺名称 */
.shop-name {
  margin: 15px 0;
  span {
    color: #438cde;
    cursor: pointer;
    &:hover {
      color: $theme_color;
    }
  }
  .ivu-icon {
    color: #ff8f23;
    cursor: pointer;
    &:hover {
      color: $theme_color;
    }
  }
}
/** 商品列表 */
table {
  border: 1px solid #ddd;
  color: #444;
  border-collapse: collapse;
  width: 100%;
  font-size: 14px;
  tr {
    border-top: 1px solid #ddd;
  }
  thead > tr {
    height: 40px;
    background: #eee;
  }
  td {
    padding: 5px;
    text-align: center;
    &:first-child {
      text-align: left;
      display: flex;
      img {
        width: 90px;
        height: 66px;
        margin-right: 10px;
        margin-left: 0px;
        cursor: pointer;
      }
    }
    &:last-child {
      color: $theme_color;
    }

    p {
      margin-bottom: 8px;
    }
  }
}
/** 订单价格 */
.order-price {
  text-align: right;
  margin-top: 30px;
  font-size: 16px;
  color: #999;
  > div > span:nth-child(2) {
    width: 130px;
    text-align: right;
    display: inline-block;
    margin-top: 10px;
  }
  .actrual-price {
    color: $theme_color;
    font-weight: bold;
    font-size: 20px;
  }
}
.verificationCode {
  font-size: 20px;
  margin-bottom: 20px;
  color: rgb(65, 63, 63);
  font-weight: bold;
  text-align: center;
  span {
    color: $theme_color;
  }
}
/** 订单进度条 */
.progress {
  margin: 15px 0;
}

.invoice {
  .inovice-content {
    >table tr th {
      height: 45px;
      font-weight: 600;
    }

    >span {
      margin-right: 10px;
    }

    >span:last-child {
      color: $theme_color;
      cursor: pointer;

      &:hover {
        border-bottom: 1px solid $theme_color;
      }
    }
  }
}
</style>
